import React, { Component } from 'react';

class ClassCmp extends Component {
    state = {
        username:'',
        password:'',
        age:'',
        gender:'女',
    }
    
    render() {
        const {gender} = this.state
        return (
            <div>
                这是一个类组件<br/>
                用户名：<input type="text" onChange={this.handleChange('username')}/><br/>
                年龄：<input type="text" onChange={this.saveAge.bind(this,'age')}/><br/>
                密码：<input type="text" onChange={(event) =>{this.saveData('password',event.target.value)}}/><br/>
                性别：<label ><input type="radio" name="gender" value='男' defaultChecked={gender === "男" ? true : false}/>男</label>
                <label ><input type="radio" name="gender" value='女' defaultChecked={gender === "女" ? true : false} />女</label>
            </div>
        );
    }

    handleChange = (dataType) =>{
        console.log(dataType);
        return (event) =>{
            console.log(event.target.value);
            this.setState({
                [dataType] : event.target.value
            })
        }
    }
    saveData = (dataType,value) =>{
        this.setState({
            [dataType] : value
        })
    }
    saveAge = (dataType,event) =>{
        this.setState({
            [dataType] : event.target.value
        })
    }
}

export default ClassCmp;